<template>
	<view class="info-list">
		
		<!-- 直播 -->
		<view class="item-wapper" @click="live">
			<view class="info-words">开始直播</view>
			
			<view class="right-wapper">
				<view class="arrow-block">
					<image src="../../static/left-gray-arrow.png" class="arrow-ico"></image>
				</view>
			</view>
		</view>
		
		<view class="line-top">
			<view class="line"></view>
		</view>
		
		
		<view class="item-wapper" @click="chat">
			<view class="info-words">聊天</view>
			
			<view class="right-wapper">
				<view class="arrow-block">
					<image src="../../static/left-gray-arrow.png" class="arrow-ico"></image>
				</view>
			</view>
		</view>
		
		<view class="line-top">
			<view class="line"></view>
		</view>
		
		<view class="item-wapper" @click="liveVideoRoom">
			<view class="info-words">视频聊</view>
			
			<view class="right-wapper">
				<view class="arrow-block">
					<image src="../../static/left-gray-arrow.png" class="arrow-ico"></image>
				</view>
			</view>
		</view>
		
		<view class="line-top">
			<view class="line"></view>
		</view>
		
		<view class="item-wapper" @click="liveAudioRoom">
			<view class="info-words">语音聊</view>
			
			<view class="right-wapper">
				<view class="arrow-block">
					<image src="../../static/left-gray-arrow.png" class="arrow-ico"></image>
				</view>
			</view>
		</view>
		
		<view class="line-top">
			<view class="line"></view>
		</view>
		
		<form @submit="formSubmitUrl">
			<!-- 拉流 -->
			<view  style="margin-top: 20upx;">
				<input 
					type="text"
					name="url"
					:value="pullUrl" 
					class="input"
					placeholder="请输入播放地址"
					placeholder-class="graywords"
					/>
			</view>
			
			<button type="primary" form-type="submit" class="submitBtn">提交</button>
		</form>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pullUrl:""
			};
		},
	
		methods: {
			live() {
				uni.navigateTo({
					url:"../liveshow/liveshow?role=" + 20
				})
				/* uni.showActionSheet({
					itemList: ["主播", "观众"],
					success(res) {
						var index = res.tapIndex;
						if (index == 0) {
							uni.navigateTo({
								url:"../liveshow/liveshow?role=" + 20
							})
							
						} else if (index == 1) {
							uni.navigateTo({
								url:"../liveshow/liveshow?role=" + 21
							})
						}
						
						
					}
				}) */
			
			},
			chat() {
			    uni.navigateTo({
			    	url:"../chat/chat"
			    })
			},
			liveVideoRoom(){
				uni.navigateTo({
					url:"../liveroom/liveroom"
				})
			},
			
			liveAudioRoom(){
				uni.navigateTo({
					url:"../liveaudioroom/liveaudioroom"
				})
			},
			formSubmitUrl(e) {
				var url = e.detail.value.url;
				uni.navigateTo({
					url:"../livepull/livepull?pullUrl=" + url
				})
			}
		}
	}
</script>

<style>
	
	.info-list {
		/* margin-top: 20upx; */
		padding: 0upx 30upx;
	}
	
	.item-wapper {
		display: flex;
		/* margin-top: 20upx; */
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.info-words {
		color: #333333;
		font-size: 16px;
		width: 25%;
		line-height: 80upx;
		/* font-weight: bold; */
	}
	
	.right-wapper {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	
	.arrow-block {
		margin-left: 10upx;
		line-height: 86upx;
	}
	
	.arrow-ico {
		width: 30upx;
		height: 30upx;
	}
	
	.input {
		height: 80upx;
		line-height: 80upx;
		width: 500upx;
		margin-left: 40upx;
	}
	
	.graywords {
		color: #EAEAEA;
	}
	
	.submitBtn {
		width: 95%;
		margin-top: 40upx;
	}
	
</style>